<template>
    <div class="bg-white page">
        <div class="flex p-4 flex-column flex-center" v-if="technician.technician">
            <el-avatar :src="technician.technician.headimg"></el-avatar>
            <div class="pt-4">
                <div>{{ technician.technician.nickname }}</div>
            </div>
            <div class="flex flex-center pt-4">
                <el-checkbox v-model="batch" label="批量排班" @change="clearForm" />
            </div>
        </div>
        <div class="month-view">
            <div class="text-bold">本月</div>
            <div class="list grid col-5 margin-top">
                <div class="item week" v-for="(w, index) in week" :key="index">
                    {{ w }}
                </div>
                <div class="item" v-for="_ in monthNum"></div>
                <div class="item day" v-for="(item, index) in technician.month" :key="item.day_time"
                    :class="{ 'bg-success': !item.disable && !item.scheduling&& !selectedList.includes(item.day_time), 'bg-danger': item.scheduling&& !selectedList.includes(item.day_time), 'bg-warning': selectedList.includes(item.day_time),'bg-gray': item.disable }"
                    @click="selected(item)">
                    {{ item.day }}
                    <div class="text-xs" v-if="item.scheduling">已排班</div>
                    <div class="text-xs" v-else-if="selectedList.includes(item.day_time)">已选择</div>
                    <div class="text-xs" v-else>休息</div>
                </div>
                <div class="item" v-for="_ in monthNumEnd"></div>
            </div>
        </div>
        <div class="month-view">
            <div class="text-bold">下一月</div>
            <div class="list grid col-5 margin-top">
                <div class="item week" v-for="(w, index) in week" :key="index">
                    {{ w }}
                </div>
                <div class="item" v-for="_ in tomonthNum"></div>
                <div class="item day" v-for="(item, index) in technician.tomonth" :key="item.day_time"
                    :class="{ 'bg-success': !item.disable && !item.scheduling&& !selectedList.includes(item.day_time), 'bg-danger': item.scheduling&& !selectedList.includes(item.day_time), 'bg-warning': selectedList.includes(item.day_time),'bg-gray': item.disable }"
                    @click="selected(item)">
                    {{ item.day }}
                    <div class="text-xs" v-if="item.scheduling">已排班</div>
                    <div class="text-xs" v-else-if="selectedList.includes(item.day_time)">已选择</div>
                    <div class="text-xs" v-else>休息</div>
                </div>
                <div class="item" v-for="_ in tomonthNumEnd"></div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" width="500" @close="handleClose">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">
                        <span>上工日期：</span>
                        <span v-if="form.day"> {{ form.day }} </span>
                        <span v-else> {{ form.start_day }} ~ {{ form.end_day }}
                            {{ form.day_num_text }} </span>
                    </h4>
                </div>
            </template>
            <div class="flex flex-center">
                <el-time-select v-model="form.start" start="00:00" step="00:30" end="23:30" format="HH:mm"
                    placeholder="上班时间" @change="startTime" />
                <span class="mx-4">-</span>
                <el-time-select v-model="form.end" start="00:00" step="00:30" end="23:30" format="HH:mm"
                    placeholder="收班时间" @change="endTime" />
            </div>
            <div class="flex flex-center pt-4">
                <el-checkbox v-model="form.end_next_day" label="次日收班" @change="entNextDay" />
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
                technician: {},
                form: {
                    day: '',
                    end_next_day: false,
                    start_time: '',
                    end_time: '',
                    start_date: '',
                    end_date: '',
                    start: '09:00',
                    end: '18:00',
                    day_num: '',
                    day_num_text: '',
                    start_day: '',
                    end_day: '',
                },
                dialogVisible: false,
                monthNum: 0,
                tomonthNum: 0,
                monthNumEnd: 0,
                tomonthNumEnd: 0,
                batch: false,
                selectedList: []
            };
        },
        created() {
            this.form.technician_id = this.$route.query.id
            this.getData();
        },
        methods: {
            getData() {
                this.$http.useGet(location.pathname+"TechnicianScheduling/adjustScheduling", {
                    technician_id: this.form.technician_id
                }).then(res => {
                    this.technician = res.data;
                    this.monthNum = res.data.month[0].week;
                    this.monthNumEnd = 7 - (res.data.month[res.data.month.length - 1].week + 1);
                    this.tomonthNum = res.data.tomonth[0].week;
                    this.tomonthNumEnd = 7 - (res.data.tomonth[res.data.tomonth.length - 1].week + 1);
                });
            },
            selected(item) {
                if (item.disable) { return; }
                let D = {
                    start_time: item.day_time + ' 09:00:00',
                    end_time: item.day_time + ' 18:00:00',
                    start: '09:00',
                    end: '18:00',
                    technician_id: this.$route.query.id
                }
                if (item.scheduling) {
                    D.id = item.scheduling.id;
                    D.start_time = item.scheduling.start_time;
                    D.end_time = item.scheduling.end_time;
                }
                const start_date = new Date(D.start_time.replace(/-/g, '/'));
                const temp=new Date(D.start_time.replace(/-/g, '/'));
                const end_date = new Date(D.end_time.replace(/-/g, '/'));
                D.start = `${start_date.getHours().toString().padStart(2, '0')}:${start_date.getMinutes().toString().padStart(2, '0')}`;
                D.end = `${end_date.getHours().toString().padStart(2, '0')}:${end_date.getMinutes().toString().padStart(2, '0')}`;
                D.start_date = start_date;
                D.end_date = end_date;
                temp.setDate(temp.getDate() + 1);
                D.end_next_day = temp.getDate() === end_date.getDate();
                if (this.batch) {
                    if (this.form.start_day && !this.form.end_day) {
                        const date = new Date(item.day_time);
                        const formDate = new Date(this.form.start_day);
                        if (date < formDate) {
                            D.start_day = item.day_time;
                            D.end_day = this.form.start_day;
                        } else {
                            D.start_day = this.form.start_day;
                            D.end_day = item.day_time;
                        }
                        this.selectedList = [];
                        const day_num = Math.floor((new Date(D.end_day).getTime() - new Date(D.start_day).getTime()) / 86400000) + 1;
                        const start_date = new Date(D.start_day);
                        for (let i = 0; i < day_num; i++) {
                            this.selectedList.push(`${start_date.getFullYear()}/${(start_date.getMonth() + 1).toString().padStart(2, '0')}/${start_date.getDate()}`);
                            start_date.setDate(start_date.getDate() + 1);
                        }
                        D.day_num = day_num;
                        D.day_num_text = `共${day_num}天`;
                        this.form = D;
                        this.$nextTick(() => {
                            this.dialogVisible = true;
                        })
                    } else {
                        D.start_day = item.day_time;
                        this.selectedList = [
                            item.day_time
                        ];
                        D.end_day = '';
                        D.day_num = 0;
                        D.day_num_text = '';
                        this.form = D;
                    }
                } else {
                    D.day = item.day_time;
                    this.form = D;
                    this.$nextTick(() => {
                        this.dialogVisible = true;
                    })
                }
            },
            startTime(val) {
                const date = this.form.start_date;
                this.form.start_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${val}:00`;
            },
            endTime(val) {
                let date = this.form.end_date;
                if (this.form.end_next_day) {
                    date.setDate(date.getDate() + 1);
                }
                this.form.end_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${val}:00`;
            },
            entNextDay(val) {
                let date = this.form.start_date;
                if (val) {
                    date.setDate(date.getDate() + 1);
                    this.form.end_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${this.form.end}:00`;
                } else {
                    this.form.end_time = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${this.form.end}:00`;
                }
            },
            handleClose() {
                this.clearForm();
            },
            clearForm() {
                this.selectedList = [];
                this.form.id = '';
                this.form.day = '';
                this.form.day_num = '';
                this.form.day_num_text = '';
                this.form.start_day = '';
                this.form.end_day = '';
                this.getData();
            },
            submit() {
                this.$http.usePost(location.pathname+"TechnicianScheduling/update", this.form).then(res => {
                    this.dialogVisible = false;
                });
            }
        }
    }
</script>
<style>
    .page {
        height: 100%;
        overflow-y: scroll;
    }

    .month-view {
        padding: 10px;
    }

    .month-view .text-bold {
        font-weight: 600;
    }

    .month-view .list {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(7, minmax(0px, 1fr));
        border: solid 1px var(--el-border-color);
    }

    .month-view .list .item {
        grid-column: span 1 / span 1;
        border: solid 1px var(--el-border-color);
        background-color: var(--el-bg-color);
    }

    .month-view .list .item.week {
        background-color: var(--el-bg-color-page);
        padding: 10px;
        text-align: center;
    }

    .month-view .list .item.day {
        background-color: var(--el-bg-color);
        padding: 10px;
        text-align: center;
    }

    .month-view .list .item.day.bg-gray {
        background-color: var(--el-bg-color-page);
        color: var(--el-text-color-disabled);
    }

    .month-view .list .item.day.bg-success {
        background-color: var(--el-color-success-light-9);
        color: var(--el-color-success);
    }

    .month-view .list .item.day.bg-danger {
        background-color: var(--el-color-danger-light-9);
        color: var(--el-color-danger);
    }

    .month-view .list .item.day.bg-warning {
        background-color: var(--el-color-warning-light-9);
        color: var(--el-color-warning);
    }

    .month-view .list .item.day:hover {
        background-color: var(-el-bg-color-page);
        cursor: pointer;
    }

    .flex-center {
        align-items: center;
    }

    .mx-4 {
        margin: 0 10px;
    }

    .p-4 {
        padding: 10px;
    }

    .pl-4 {
        padding-left: 10px;
    }

    .pt-4 {
        padding-top: 10px;
    }

    .flex-column {
        flex-direction: column;
    }
</style>